.route-slide-in-right-enter-active,
.route-slide-in-right-leave-active {
  transition: all 0.85s ease-in-out;
}

.route-slide-in-right-enter-to {
  position: absolute;
  right: 0;
  top: 0;
}

.route-slide-in-right-enter-from {
  position: absolute;
  right: -100%;
  top: 0;
}

.route-slide-in-right-leave-to {
  opacity: 0;
}

.route-slide-in-right-leave-from {
  opacity: 1;
}

.route-slide-in-left-enter-active,
.route-slide-in-left-leave-active {
  transition: all 0.85s ease-in-out;
}

.route-slide-in-left-enter-to {
  position: absolute;
  left: 0%;
  top: 0;
}

.route-slide-in-left-enter-from {
  position: absolute;
  left: -100%;
  top: 0;
}

.route-slide-in-left-leave-to {
  opacity: 0;
}

.route-slide-in-left-leave-from {
  opacity: 1;
}

.route-slide-out-left-enter-active,
.route-slide-out-left-leave-active {
  transition: all 0.85s ease-in-out;
}

.route-slide-out-left-enter-to {
  opacity: 1;
}

.route-slide-out-left-enter-from {
  opacity: 0;
}

.route-slide-out-left-leave-to {
  position: absolute;
  left: -100%;
  top: 0;
}

.route-slide-out-left-leave-from {
  position: absolute;
  left: 0;
  top: 0;
}

.route-slide-out-right-enter-active,
.route-slide-out-right-leave-active {
  transition: all 0.85s ease-in-out;
}

.route-slide-out-right-enter-to {
  opacity: 1;
}

.route-slide-out-right-enter-from {
  opacity: 0;
}

.route-slide-out-right-leave-to {
  position: absolute;
  right: -100%;
  top: 0;
}

.route-slide-out-right-leave-from {
  position: absolute;
  right: 0;
  top: 0;
}

.route-slide-in-up-enter-active,
.route-slide-in-up-leave-active {
  transition: all 0.85s ease-in-out;
}

.route-slide-in-up-enter-to {
  position: absolute;
  top: 0;
  left: 0;
}

.route-slide-in-up-enter-from {
  position: absolute;
  top: -100%;
  left: 0;
}

.route-slide-in-up-leave-to {
  opacity: 0;
}

.route-slide-in-up-leave-from {
  opacity: 1;
}

.route-slide-in-down-enter-active,
.route-slide-in-down-leave-active {
  transition: all 0.85s ease-in-out;
}

.route-slide-in-down-enter-to {
  position: absolute;
  top: 0;
  left: 0;
}

.route-slide-in-down-enter-from {
  position: absolute;
  top: 100%;
  left: 0;
}

.route-slide-in-down-leave-to {
  opacity: 0;
}

.route-slide-in-down-leave-from {
  opacity: 1;
}

.route-slide-out-up-enter-active,
.route-slide-out-up-leave-active {
  transition: all 0.85s ease-in-out;
}

.route-slide-out-up-enter-to {
  opacity: 1;
}

.route-slide-out-up-enter-from {
  opacity: 0;
}

.route-slide-out-up-leave-to {
  position: absolute;
  top: -100%;
  left: 0;
}

.route-slide-out-up-leave-from {
  position: absolute;
  top: 0;
  left: 0;
}

.route-slide-out-down-enter-active,
.route-slide-out-down-leave-active {
  transition: all 0.85s ease-in-out;
}

.route-slide-out-down-enter-to {
  opacity: 1;
}

.route-slide-out-down-enter-from {
  opacity: 0;
}

.route-slide-out-down-leave-to {
  position: absolute;
  top: 100%;
  left: 0;
}

.route-slide-out-down-leave-from {
  position: absolute;
  top: 0;
  left: 0;
}